<template>
    <div id="demand">

        <div class="filter-container" style="margin-bottom:20px;margin-top:20px">
            <span style="margin-left:10px">学校名称：</span>
            <el-input @keyup.enter.native="handleFilter" class="filter-item widht" placeholder="请输入关键字" v-model="listQuery.schoolName" clearable>
            </el-input>
            <span style="margin-left:10px">需求类型：</span>
            <el-select v-model="listQuery.type" placeholder="请选择" style="width: 120px;" clearable>
                <el-option label="讲座对接" :value='1'></el-option> 
                <el-option label="研学实践" :value='2'></el-option>
                <el-option label="活动邀约" :value='3'></el-option> 
                <el-option label="其他" :value='4'></el-option>
            </el-select>         
            <span style="margin-left:10px">需求状态：</span>
            <el-select v-model="listQuery.status" placeholder="请选择" style="width: 120px;" clearable>
                <el-option label="未处理" :value='1'></el-option> 
                <el-option label="已处理" :value='2'></el-option>
            </el-select>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>   
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row 
             @selection-change="handleSelectionChange" style="width: 100%">

            <el-table-column align="center" label="ID" min-width="50">
                <template slot-scope="scope">
                    <span>{{scope.row.demandId}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="100" align="center" label="学校名称" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.schoolName}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="80" align="center" label="需求类型" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.type ==1 ? '讲座对接' : scope.row.type ==2 ? '研学实践' : scope.row.type ==3 ? '活动邀约' : '其他'}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="120" align="center" label="需求内容" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.content}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="80" align="center" label="需求状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.status == 1 ? '未处理' : '已处理'}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="120" align="center" label="反馈内容" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.reply}}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="140" align="center" label="反馈时间" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.replyTime != null">{{ scope.row.replyTime | dateformat('YYYY-MM-DD HH:mm') }}</span>
                </template>
            </el-table-column>

            <el-table-column min-width="140" align="center" label="创建时间" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | dateformat('YYYY-MM-DD HH:mm') }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" min-width="100">
                <template slot-scope="scope" v-if="scope.row.reply==null || scope.row.reply==''">
                    <el-button size="small" @click="toDialog(scope.row)">反馈</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30,50]" 
                :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
        </div>

        <el-dialog top="4%" width="70%" title="反馈内容页" :visible.sync="dialogFormVisible" :before-close="handleClose">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 70%; margin-left:50px;'>
                <el-form-item label="反馈内容：" prop="reply">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="temp.reply"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleDemandStatus" :loading="updateButtonStatus">确定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import { getDemandPage, getUpdate } from '@/api/demand'
    import { getToken } from '@/utils/auth' // 验权
    import Multiselect from 'vue-multiselect' // 使用的一个多选框组件，element-ui的select不能满足所有需求
    import 'vue-multiselect/dist/vue-multiselect.min.css' // 多选框组件css

    export default {
      name:'demand',
      components:{ Multiselect },
      data(){
        return {
          listQuery: {
            schoolName: '',
            type: null,
            status:null,
            pageNo: 1,
            pageSize: 10
          },
          list: null,
          total: null,
          listLoading: true,
          dialogFormVisible: false,
          updateButtonStatus : false,
          rules: {
            reply: [{ required: true, message: '反馈内容必填', trigger: 'blur' }]
          },
          temp: {
            demandId: null,
            reply: null
          }

        }
      },
      mounted() {
        this.getList()
      },
      methods:{
        tableKey(){},
        handleSizeChange(val) {
          this.listQuery.pageSize = val
          this.getList()
        },
        handleCurrentChange(val) {
          this.listQuery.pageNo = val
          this.getList()
        },
        handleSelectionChange(val) {
          this.multipleSelection = val
        },
        handleFilter() {
          this.listQuery.pageNo = 1
          this.getList()
        },
        handleClose() {
          this.$confirm('数据未保存，确认关闭？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogFormVisible = false
            this.temp.reply = ''
          }).catch(() => {})
        },
        getList() {
          this.listLoading = true
          const params = this.listQuery
    
          getDemandPage(params).then((response) => {
            const { code, data: { total, list } } = response
            if (code == 0) {
              this.total = total
              this.list = list
              this.listLoading = false
            }
          })
        },
        toDialog(row){
          this.dialogFormVisible = true
          this.temp.demandId = row.demandId
          console.log('demandId', this.temp.demandId)
        },
        handleDemandStatus(){
          this.updateButtonStatus = true
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              const { temp, temp:{ demandId, reply } } = this
              if(reply.trim().length == 0 || reply == ''){
                this.$message({
                  message: '反馈内容不能为空',
                  type: 'error',
                  duration: 1000
                })
                this.loading = false
                this.updateButtonStatus = false
                return
              }
              getUpdate(temp).then((response) => {
                const { code, message } = response
                if (code == 0) {
                  this.getList()
                  this.temp.reply = ''
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success',
                    duration: 2000
                  })
                }else{
                  this.$message({
                    title: '失败',
                    message: message,
                    type: 'error',
                    duration: 2000
                  })
                }
              }).catch(err => {})
                .finally(() => {
                  this.updateButtonStatus = false
                })
            }
          })
        }
      }
    
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    #demand {
        padding: 10px;
    }
    .app-container {
        padding: 20px;
    }
    .pagination-container {
        margin-top: 30px;
    }
    .widht{
        width: 180px;
    }
    .timeWidht{
        width: 300px;
    }


</style>

